<template>
  <div id="previewMain">
    <previewpage ref="previewPagemain" :postData="postData" :propsData="propsData" @initFrom="initFrom"></previewpage>
  </div>
</template>
<script>
import previewpage from '@/views/index.vue'
import { apiComm } from '@/api/index.js'
export default {
  data () {
    return {
      js: '',
      css: '',
      html: '',
      propsData: {},
      postData: {
        type: 'refreshFrame',
        data: {
          generateConf: {
            fileName: '测试',
            type: 'file'
          },
          html: this.html,
          js: '{}',
          css: this.css,
          scripts: [],
          links: []
        }
      }
    }
  },
  components: { previewpage },
  methods: {
    liulanfrom () {
      const fromid = this.$route.query.fromid
      if (fromid === undefined || fromid === null) {
        this.$message.error('表单ID找不到！')
        return false
      }
      apiComm('tappFrom.getFromContent', { fid: fromid }).then(res => {
        if (res.code === 0) {
          if (res.data.length === 0) {
            this.$message.error('找不到表单信息，可能表单已删除！')
            return
          }
          const fromcontent = JSON.parse(res.data[0].fromcontent)
          this.js = fromcontent.js
          this.css =
            fromcontent.css !== false
              ? fromcontent.css + fromcontent.systemcss
              : fromcontent.systemcss
          this.propsData.IsPower = '1'
          this.html = fromcontent.html
          this.postData.data.css = this.css
          this.postData.data.html = this.html
          this.postData.data.js = this.js.replace('export default', '')
          this.$refs.previewPagemain.previewinit(this.postData)
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    initFrom (from) {
      this.from = from
      this.from = from
      const fromdata = from.data()
      fromdata.deviceMode = 'dialog'
      fromdata.dialogclose = this.dialogclose
      function data () {
        return fromdata
      }
      this.from.data = data
      window.onresize = () => {
        const docWidth = document.body.clientWidth
        if (docWidth < 1024) {
          fromdata.deviceMode = 'Mobile'
        } else {
          fromdata.deviceMode = 'pc'
        }
      }
      const docWidth2 = document.body.clientWidth
      if (docWidth2 < 1024) {
        fromdata.deviceMode = 'Mobile'
      } else {
        fromdata.deviceMode = 'pc'
      }
    }
  },
  created () {
    this.liulanfrom()
  }
}
</script>
<style scoped>
#previewMain {
  padding-left: 10px;
}
</style>
